<template>
  <!-- v-if条件渲染标签不存在 -->
  <button @click="changeClick">切换</button>
  <div v-if="isShow">我是div</div>
  <!-- v-show条件 调用display: none;实现，标签存在 -->
  <div v-show="isShow">我是div</div>
  <!-- v-show不能和template一起使用 -->
  <!-- <template v-show="isShow">
    <span>aaaa</span>
  </template> -->

  <hr />
  <!-- v-else-if的基本使用 -->
  <input type="text" v-model="score" />
  <div v-if="score > 90">优秀</div>
  <div v-else-if="score > 60">及格</div>
  <div v-else>不及格</div>
  <hr />
  <!-- template元素本身不会被渲染，可以和条件渲染共同使用 -->
  <template>6666667</template>
  <template v-if="isShow">
    <span>aaaa</span>
  </template>
  <template v-else>
    <span>bbb</span>
  </template>
  <!-- v-for优先级比v-if高
  v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断） -->
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const isShow = ref(true)
    const score = ref(0)
    const changeClick = () => {
      isShow.value = !isShow.value
    }
    return { isShow, changeClick, score }
  },
}
</script>
<style scoped></style>
